Przejdź do głównej zawartości
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Zarządzanie szablonami wyświetlaczy publicznych

Szablony wyświetlaczy publicznych są podstawą Twoich niestandardowych wizualizacji. Definiują układ, strukturę i elementy wizualne, które zostaną zastosowane w Twoich instalacjach. Ten kompleksowy przewodnik obejmuje wszystko, od podstaw tworzenia szablonów po zaawansowane techniki projektowania.

📋 Przegląd​

Czym są szablony wyświetlaczy publicznych?​

Szablony służą jako wielokrotne wzorce, które:

  • 📐 Definiują układy wizualne dla Twoich wyświetlaczy publicznych
  • 🧩 Organizują bloki treści i ich położenie
  • 🎨 Ustanawiają spójność projektu w wielu instalacjach
  • ⚙️ Umożliwiają szybkie wdrożenie ustandaryzowanych wizualizacji
  • 🔄 Wspierają łatwe aktualizacje we wszystkich połączonych konfiguracjach

Kluczowe korzyści​

KorzyśćOpis
🚀 EfektywnośćTwórz raz, używaj w wielu instalacjach
🎯 SpójnośćUtrzymuj jednolite standardy projektowania
🔧 ElastycznośćŁatwe modyfikacje bez potrzeby tworzenia od nowa

🚀 Rozpoczęcie pracy​

Proces pracy z szablonami​

  1. 📐 Zaprojektuj układ - Zaplanuj swoją strukturę wizualną
  2. 🎨 Utwórz szablon - Zbuduj przy użyciu edytora szablonów
  3. 💾 Zapisz szablon - Przechowuj do ponownego użycia w instalacjach

Wymagania wstępne​

Przed utworzeniem szablonów upewnij się, że masz:

  • ✅ Konto SmartgridX z odpowiednimi uprawnieniami
  • ✅ Jasne cele projektowe dla swojej wizualizacji
  • ✅ Wymagania dotyczące treści (obrazy, punkty danych, układy)

🎛️ Interfejs zarządzania szablonami​

Dostęp do Menedżera Szablonów​

infographicimage

Kroki nawigacji:

  1. Zaloguj się na swoje konto SmartgridX
  2. Przejdź do 'Wyświetlacze publiczne' w głównym pasku bocznym
  3. Kliknij przycisk 'Szablon wyświetlacza publicznego' na stronie przeglądowej

To otworzy interfejs zarządzania szablonami, w którym możesz przeglądać, tworzyć, edytować i usuwać szablony.

Tabela przeglądu szablonów​

infographicimage

Dostępne akcje:

  • ➕ Dodaj - Zielony przycisk do rozpoczęcia tworzenia szablonu
  • ✏️ Edytuj - Modyfikuj istniejący projekt szablonu
  • 🗑️ Usuń - Usuń nieużywany szablon

🎨 Proces tworzenia szablonu​

Rozpoczęcie nowego szablonu​

Kliknij przycisk "Utwórz nowy szablon", aby otworzyć interfejs edytora szablonów.

Konfiguracja nagłówka szablonu​

infographicimage

Ustawienia tytułu​

Tytuł szablonu:

  • Cel: Identyfikuje szablon w listach i konfiguracjach
  • Najlepsze praktyki: Używaj opisowych, specyficznych dla projektu nazw
  • Przykłady: "KPI-Dashboard-Fabryki", "Układ-Monitorowania-Energii", "Wyświetlacz-Wielostrefowy"

Konfiguracja marginesu​

Ustawienia marginesu definiują bezpieczny obszar od krawędzi wyświetlacza:

Suwak marginesu (0-100px):

  • 📐 Zakres: 0 do 100 pikseli od krawędzi wyświetlacza
  • 🎯 Cel: Tworzy bezpieczną przestrzeń, aby zapobiec przycięciu treści
  • 📱 Zastosowanie: Zapewnia widoczność na różnych typach wyświetlaczy
  • ⚙️ Zalecenie: Użyj 10-20px dla standardowych wyświetlaczy, 30-50px dla ekranów od krawędzi do krawędzi

Wpływ wizualny:

  • 0px margines - Treść sięga krawędzi wyświetlacza
  • 50px margines - Treść zaczyna się 50 pikseli od wszystkich krawędzi
  • 100px margines - Maksymalny bezpieczny obszar z dużą przestrzenią marginesu

Funkcjonalność zapisu​

Przycisk 💾 Zapisz (w prawym górnym rogu) pozwala na zapisanie bieżącego szablonu.

🧩 System układu bloków​

Zrozumienie systemu siatki​

infographicimage

Podstawy siatki​

Edytor szablonów korzysta z systemu siatki opartego na procentach 100×100:

Właściwości siatki:

  • 📐 Wymiary: 100 jednostek szerokości × 100 jednostek wysokości
  • 📊 Jednostki: Wartości procentowe (1 jednostka = 1% całkowitego wymiaru)
  • 🎯 Precyzja: Umożliwia dokładne pozycjonowanie i sizing
  • 📱 Responsywność: Automatycznie dostosowuje się do różnych rozmiarów ekranów

Przykłady układu bloków​

Konfiguracja: 100 szerokości × 100 wysokości
Wynik: Pełnoekranowe pokrycie
Zastosowanie: Pojedyncza duża wizualizacja, obraz pełnoekranowy

┌─────────────────────────────────┐
│                                 │
│         PEŁNY BLOK              │
│                                 │
│                                 │
└─────────────────────────────────┘

Manipulacja blokami​

Dodawanie bloków​

Metoda: Kliknij przycisk "Dodaj blok" (w prawym górnym rogu edytora)
Wynik: Nowy blok pojawia się z domyślnymi wymiarami
Następne kroki: Ustaw i zmień rozmiar zgodnie z potrzebami

Pozycjonowanie bloków​

Przeciągnij i upuść:

  • 🖱️ Kliknij i przytrzymaj dowolny blok, aby go przesunąć
  • 📍 Podgląd na żywo pokazuje pozycję podczas przeciągania
  • 🧲 Przyciąganie do siatki pomaga w precyzyjnym wyrównaniu
  • 👁️ Wskazówki wizualne pojawiają się, aby pomóc w wyrównaniu

Zmiana rozmiaru bloków​

Uchwyt zmiany rozmiaru:

  • 📐 Prawy dolny róg pokazuje uchwyt zmiany rozmiaru po wybraniu bloku
  • 🔧 Przeciągnij, aby zmienić rozmiar zarówno szerokości, jak i wysokości jednocześnie
  • 📊 Wartości na żywo pokazują bieżące wymiary

Kontrola precyzji​

infographicimage

Panel pozycji po prawej stronie​

Gdy blok jest wybrany, prawy panel zapewnia:

Kontrole pozycji:

  • 📍 Pozycja X - Poziomy przesunięcie od lewej krawędzi (0-100)
  • 📍 Pozycja Y - Pionowe przesunięcie od górnej krawędzi (0-100)
  • 🎨 Indeks Z - Kolejność warstw dla nakładających się bloków
  • 📏 Szerokość - Procentowa szerokość bloku (1-100)
  • 📏 Wysokość - Procentowa wysokość bloku (1-100)

⚙️ Konfiguracja bloków​

Rodzaje bloków i właściwości​

infographicimage

Dostęp do konfiguracji bloków​

Metoda:

  1. Wybierz blok na kanwie edytora
  2. Panel konfiguracji pojawia się na dole ekranu
  3. Menu rozwijane typu bloku jest główną opcją konfiguracyjną

Uwaga: Nie wszystkie bloki są obecnie konfigurowalne. To się zmieni w miarę postępu prac rozwojowych. Więcej typów bloków zostanie dodanych w przyszłych aktualizacjach.

Dostępne typy bloków​

Cel: Wyświetlanie statycznych obrazów, logo, tła, GIF-ów
Opcje konfiguracyjne:

  • 📁 Źródło obrazu - Prześlij lub podaj adres URL, który będzie używany jako domyślny dla tego bloku. Możesz to zostawić puste, jeśli chcesz wymusić wybór obrazu w konfiguracji

Przykłady użycia:

  • Logo i branding firmy
  • Obrazy tła
  • Zdjęcia sprzętu
  • GIF-y

Przykłady szablonów​

infographicimage

Ten przykład pokazuje dobrze zorganizowany szablon z:

  • 📊 Jasną organizacją bloków z opisowymi etykietami
  • 📐 Odpowiednim odstępem i wyrównaniem
  • 🎯 Funkcjonalnymi typami bloków odpowiadającymi różnym potrzebom treści

Nazewnictwo bloków w tym przykładzie:

  • Każdy blok pokazuje swój zamierzony cel
  • Jasne etykietowanie ułatwia konfigurację
  • Logiczna organizacja wspiera utrzymanie

📚 Powiązana dokumentacja​

Kolejne kroki​

Po utworzeniu szablonu:

  1. ⚙️ Skonfiguruj instalacje - Zastosuj szablony do określonych instalacji
  2. 🎛️ Połącz kontrolery - Podłącz do sprzętu wyświetlającego
  3. 🚀 Przewodnik dla początkujących - Kompletne omówienie przepływu pracy

Tematy zaawansowane​

  • 🎨 Zaawansowane techniki projektowania
  • 📊 Integracja danych niestandardowych
  • 🔄 Zautomatyzowane aktualizacje szablonów
  • 👥 Współpraca nad szablonami dla wielu użytkowników

💡 Podsumowanie najlepszych praktyk​

Projektowanie szablonów​

✅ Zasady projektowania:

  • 🎯 Utrzymaj prostotę - Skup się na istotnych informacjach
  • 📱 Projektuj responsywnie - Testuj na różnych rozmiarach ekranów
  • 🎨 Utrzymuj spójność - Używaj ustandaryzowanych kolorów i układów

Zarządzanie szablonami​

✅ Wskazówki dotyczące organizacji:

  • 📝 Używaj opisowych nazw - Ułatw znajdowanie szablonów
  • 🔄 Regularne utrzymanie - Usuwaj nieużywane szablony
  • 👥 Dziel się standardami - Zapewnij spójność w zespole

🎨 Gotowy na projektowanie? Po utworzeniu i skonfigurowaniu szablonu jesteś gotów na wdrożenie oszałamiających wizualizacji w swoich instalacjach SmartgridX!